<template>
  <div style="margin-top:20px">
    <el-card class="box-card">
<!--      头部-->
      <div  class="clearfix">
        <!-- tabs标签页-->
<!--        左侧内容-->
        <el-tabs v-model="activeName" class="tabs">
          <!--@tab-click="handleClick"-->
          <el-tab-pane label="销售额" name="sale">
          </el-tab-pane>
          <el-tab-pane label="访问量" name="visits">
          </el-tab-pane>
        </el-tabs>
<!--         右侧内容-->
        <div class="right" >
          <span @click="setDate">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
          <!-- 日期选择器-->
          <!-- v-model="value1"-->
          <el-date-picker
            v-model="date"
            value-format="yyyy-MM-dd"
            class="date"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
          >
          </el-date-picker>
        </div>
      </div>
<!--      身体-->
      <div class="row">
        <el-row :gutter="10" >
          <el-col :span="18">
            <div class="echart" ref="echart"></div>
          </el-col>
          <el-col :span="6" class="span">
            <h3>门店销售额排名</h3>
            <ul>
              <li v-for="(rank,index) in orderRank.slice(0,3)" :key="rank.no">
                <span class="rindex" >{{ rank.no }}</span>
                <span>{{ rank.name }}</span>
                <span class="rvalue">{{ rank.money }}</span>
              </li>
              <li v-for="(rank,index) in orderRank.slice(3)" :key="rank.no">
                <span class="rindex2" >{{ rank.no }}</span>
                <span>{{ rank.name }}</span>
                <span class="rvalue">{{ rank.money }}</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as dayjs from 'dayjs'
import {mapState} from "vuex";
export default {
  name: "Sale",
  data() {
    return {
      activeName: 'sale',
      date:[],
      echart:null,
    };
  },
  mounted() {
    this.echart =echarts.init(this.$refs.echart);
    this.echart.setOption( {
      title:{
        text:'销售额趋势',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          color:'#91cc75',
          barWidth: '60%',
          data: [],
          label:{
            show: true,
            position: 'top'
          }
        }
      ]
    })
  },
  computed:{
    title(){
      return this.activeName=='sale'?'销售额':'访问量'
    },
    ...mapState({
      listData:(state)=>{
        return state.home.echartData||{};
      }
    }),
    //门店销售排名
    orderRank(){
      return this.listData.orderRank||[];
  },
  },
  watch:{
    title(){
      this.echart.setOption({
            title:{
              text:this.title+'趋势',
            },
            xAxis:{
              data:this.activeName=='sale'?this.listData.orderFullYearAxis:this.listData.userFullYearAxis,
            },
            series:[{
              data:this.activeName=='sale'?this.listData.orderFullYear:this.listData.userFullYear,
            }]
          })
      },
    //监听listData，当数据初次获取时，给echart设置参数
    listData() {
      this.echart.setOption({
          xAxis: {
            data: this.listData.orderFullYearAxis
          },
          series: [{
            data: this.listData.orderFullYear
          }]
        })
    }
  },
  methods:{
    setDate(){
      let start=dayjs().format('YYYY-MM-DD');
      let end=dayjs().format('YYYY-MM-DD');
      this.date=[start,end]
    },
    setWeek(){
      let start=dayjs().day(1).format('YYYY-MM-DD');
      let end=dayjs().day(7).format('YYYY-MM-DD');
      // let start=dayjs().startOf('week').format('YYYY-MM-DD');
      // let end=dayjs().endOf('week').format('YYYY-MM-DD');
      this.date=[start,end]
    },
    setMonth(){
      let start=dayjs().startOf('month').format('YYYY-MM-DD');
      let end=dayjs().endOf('month').format('YYYY-MM-DD');
      this.date=[start,end]
    },
    setYear(){
      let start=dayjs().startOf('year').format('YYYY-MM-DD');
      let end=dayjs().endOf('year').format('YYYY-MM-DD');
      this.date=[start,end]
    }
  }
}
</script>

<style scoped>
.clearfix{
  position: relative;
  display:flex;
  justify-content:space-between;
}
.tabs{
  width: 100%;
}
.right{
  position:absolute;
  right: 0px;
  }
.date{
  width:250px;
  margin:0 20px;
}
.right span{
  margin:0 20px;
}
.row{
  margin-top:40px;
}
.echart{
  width:100%;
  height:400px;
}
ul{
  list-style:none;
  width:100%;
  height:400px;
  /*margin:0 10px;*/
}
ul li{
  height:12%;
  /*margin:0 10px;*/
}
.span span{
  margin:0 10px;
}
.rindex{
  float:left;
  background: #fdeeed;
  color:#e23531;
  width:20px;
  height:20px;
  border-radius:50%;
  text-align: center;
}
.rindex2{
  float:left;
  color:black;
  width:20px;
  height:20px;
  text-align: center;
}
.rvalue{
  float: right;
}


</style>
